<template>
    <!-- 学校基本信息 -->
    <div class="sub-content-info">
        <div class="title1">地震预警列表</div>
        
        <div class="list_content" >
            <ul>
                <li v-if="lastEEWDataList.length > 0">
                    <img src="../../../assets/img/s1.png" alt="">
                    <div class="eew_content">
                        <div class="eew_content_title">预警时刻: {{lastEEWDataList[lastEEWDataList.length-1]['SendTime']}}</div>
                        <div class="eew_content_title">发震时刻: {{lastEEWDataList[lastEEWDataList.length-1]['Oritime']}}</div>
                        <div class="eew_content_title">震中位置: {{lastEEWDataList[lastEEWDataList.length-1]['Locname']}}发生M{{lastEEWDataList[lastEEWDataList.length-1]['Magnitude']}}级地震</div>
                    </div>
                </li>
                <li v-if="lastEEWDataList.length > 1">
                    <img src="../../../assets/img/s2.png" alt="">
                    <div class="eew_content">
                        <div class="eew_content_title">预警时刻: {{lastEEWDataList[lastEEWDataList.length-2]['SendTime']}}</div>
                        <div class="eew_content_title">发震时刻: {{lastEEWDataList[lastEEWDataList.length-2]['Oritime']}}</div>
                        <div class="eew_content_title">震中位置: {{lastEEWDataList[lastEEWDataList.length-2]['Locname']}}发生M{{lastEEWDataList[lastEEWDataList.length-2]['Magnitude']}}级地震</div>
                    </div>
                </li>
                <li v-if="lastEEWDataList.length > 2">
                    <img src="../../../assets/img/s3.png" alt="">
                    <div class="eew_content">
                        <div class="eew_content_title">预警时刻: {{lastEEWDataList[lastEEWDataList.length-3]['SendTime']}}</div>
                        <div class="eew_content_title">发震时刻: {{lastEEWDataList[lastEEWDataList.length-3]['Oritime']}}</div>
                        <div class="eew_content_title">震中位置: {{lastEEWDataList[lastEEWDataList.length-3]['Locname']}}发生M{{lastEEWDataList[lastEEWDataList.length-3]['Magnitude']}}级地震</div>
                    </div>
                </li>
                <li v-if="lastEEWDataList.length > 3">
                    <img src="../../../assets/img/s4.png" alt="">
                    <div class="eew_content">
                        <div class="eew_content_title">预警时刻: {{lastEEWDataList[lastEEWDataList.length-4]['SendTime']}}</div>
                        <div class="eew_content_title">发震时刻: {{lastEEWDataList[lastEEWDataList.length-4]['Oritime']}}</div>
                        <div class="eew_content_title">震中位置: {{lastEEWDataList[lastEEWDataList.length-4]['Locname']}}发生M{{lastEEWDataList[lastEEWDataList.length-4]['Magnitude']}}级地震</div>
                    </div>
                </li>
            </ul>
        </div>

        
    </div>
</template>
<script>
export default {
    name: 'eewDetail1',
    props:{
        lastEEWDataList:{
            type:Array,  //类型判断
            default:[]    //默认值
        }
    },
    data() {
        return {
        }
    },
    methods: {

    },
    mounted() {

    },
}
</script>
<style>
.sub-content-info .title1{
	font-family: SourceHanSansCN-Bold;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 1px;
	color: #b1eded;
	margin-top: 10px;
	background: url(@/assets/img/sub_title_bg.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 300px;
	height: 38px;
  margin-bottom: 10px;
  padding-left: 10px;
}

/* 分割线 */
.divider {
    height: 1px;
    background-color: #528693;
    width: 100%;
}

.list_content {
    width: 100%;
    height: 300px;
    position: relative;
}

.list_content ul {
  width: 100%;
  height: 100%;
}

.list_content ul li {
  width: 100%;
  height: 30%;
  margin: 3% 5%;
}

.list_content ul li img {
  height: 80%;
  float: left;
  vertical-align: 0%;
}

.list_content ul li .eew_content{
    height: 80%;
    width: 75%;
    float: left;
    vertical-align: 0%;
    background: url(../../../assets/img/job-bg1.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.list_content ul li .eew_content1{
    height: 80%;
    width: 75%;
    float: left;
    vertical-align: 0%;
    background: url(../../../assets/img/job-bg2.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.list_content ul li h5 {

    float: left;
    color: #fff;
    margin-left: 5%;

}

.list_content ul li span {

  float: left;
  color: #fff;
  margin-left: 5%;
}

.list_content ul li:nth-of-type(1) em {
  color: #f29701;
}
.list_content ul li em {
  font-style: normal;
  margin-left: 5%;
  color: #0ac1c7;
}

.eew_content_title{
    text-align: left;
padding: 3px 0 0 10px;
font-size: 14px;
color: #fff;
}



</style>